import { ReactNode } from 'react'
import Styles from './index.module.scss'

type PropsT = {
  children?: ReactNode
}

type ItemPropsT = {
  title?: string | ReactNode
  paragraph?: string | ReactNode
  layout?: 'vertical' | 'horizontal'
}

const index = ({ children }: PropsT) => {
  return (
    <ul
      className={`bg_ffffff base-content-view ${Styles.container} ${Styles.mb_12}`}
    >
      {children}
    </ul>
  )
}

export const ListGroupItem = ({
  title,
  paragraph,
  layout = 'horizontal',
}: ItemPropsT) => {
  return (
    <li
      className={`fontsize_14 ${Styles.bor_b} ${
        layout === 'horizontal' ? 'd_flex d_flex_vertical_center' : 'd_column'
      }`}
      style={{ padding: '14px 12px' }}
    >
      <p className={`color_666`}>{title}</p>
      <p
        className={`color_333 fw_600 ${
          layout === 'horizontal' ? 'text_right' : ''
        }`}
        style={{ flex: 'auto' }}
      >
        {paragraph}
      </p>
    </li>
  )
}

export default index
